<template>
	<cover-view class="box-view" @click="handleClick">
		<cover-image class="img"
		v-if="!isFullScreen"
			src="http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/static/left-btn1.png" />
	</cover-view>
	<video @fullscreenchange="screenChange" controls="controls" id="myVideo" :custom-cache="false" :src="videoSrc"
		:autoplay="true" direction="0" style="width: 100%; height: 100vh"></video>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'

	const isFullScreen = ref(false)
	const videoSrc = ref(
		'https://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/video/qq.mp4'
	)

	const showVideo = () => {
		// let videoContext = uni.createVideoContext('myVideo') //获取video的dom
		// videoContext.requestFullScreen({ direction: 0 })
		// videoContext.play() //视频播放
	}
	const handleClick = () => {
		uni.navigateBack()
	}
	const screenChange = (e) => {
		let fullScreen = e.detail.fullScreen //值true为进入全屏，false为退出全屏
		isFullScreen.value = fullScreen
		console.log(fullScreen);
		
		let videoContext = wx.createVideoContext('myVideo')
	}

	onLoad((option) => {
		showVideo()
		const mode = option.mode
		if (mode == 'qq_one') {
			videoSrc.value =
				'https://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/video/qq1.mp4'
			setNavigationBarTitle(`奇趣英语魔法世界`)
		} else if (mode == 'qq_two') {
			videoSrc.value =
				'https://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/video/qq2.mp4'
			setNavigationBarTitle(`场景学习动画`)
		} else if (mode == 'cj') {
			videoSrc.value =
				'https://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/video/cj.mp4'
			setNavigationBarTitle(`场景学习动画`)
		}
	})

	const setNavigationBarTitle = (text) => {
		uni.setNavigationBarTitle({
			title: text,
		})
	}
</script>

<style lang="scss" scoped>
	.box-view {
		position: fixed;
		left: 50rpx;
		top: 88rpx;
		z-index: 9999;

		.img {
			width: 40rpx;
			height: 40rpx;
		}
	}
</style>